<template>
	<view class="uni_box home">
		<navbar title='优惠券' :yin="true">
		</navbar>
		<view class="content">
			<view class="quanlist">
				<view class="quanitem" :class="item.status==0?'quanactive':''" v-for="(item,index) in list" :key="index" @click="coupon(item)">
					<image class="quanbg" src="@/pages_subject/static/img/quanbgs.png" v-if="item.status==0" mode="" />
					<image class="quanbg" src="@/pages_subject/static/img/quanbg.png" v-else mode="" />
					<view class="quan">
						<view class="quanone">
							<text class="qian">¥ <text class="qiannum">{{item.price}}</text> </text>
						</view>
						<view class="quantwo">
							<text class="kename">{{item.name}}</text>
							<text class="ketime">有效期至：{{item.end}}</text>
						</view>
						<view class="quanthree">
							<view class="qiview">{{item.status_text}}</view>
						</view>
					</view>
				</view>
				<!-- <view class="quanitem">
					<image class="quanbg" src="@/pages_subject/static/img/quanbg.png" mode="" />
					<view class="quan">
						<view class="quanone">
							<text class="qian">¥ <text class="qiannum">1000</text> </text>
						</view>
						<view class="quantwo">
							<text class="kename">课程优惠券</text>
							<text class="ketime">有效期至：2024-9-30  23:59</text>
						</view>
						<view class="quanthree">
							<view class="qiview">已过期</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				list:[]
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getList()
		},
		onShow() {
		},
		// onReachBottom: function () {
		// 	this.loadmore();
		// },
		methods: { 
			async getList(){
				let res = await this.$u.api.getorderCouponList({
					id:this.id
				});
				this.list = res
				// this.last_page = res.lastpage;
				// let list = res.list;
				// this.list = this.page == 1 ? list : [...this.list, ...list];	
				// if(this.page >= this.last_page){
				//   this.status = 'nomore';
				// }
			},
			loadmore() {
				let page = this.page;
				// let last_page = this.last_page;
				if (this.status == 'loadmore') {
					this.page++;
					this.getList();
				}
			},
			getClear(){
				this.list = []
				this.page = 1,
				this.status= "loadmore"
				this.getList()
			},
			coupon(item){
				if(item.status == 0){
					//待使用
					// 将所需参数存储在对象中
					var params = {
						data: item
					};
					// // 获取当前页面栈
					// let pages = getCurrentPages();
					// // 获取上一页实例
					// let prevPage = pages[pages.length - 2];
					// // 将参数通过方法传递给上一页
					// // prevPage.setData(params);
					// prevPage.$vm.getValue(params);
					// // 返回上一页
					// uni.navigateBack();
					// 在源页面中使用 uni.navigateBack 返回上一页面并传递参数
					uni.navigateBack({
					delta: 1, // 返回上一级页面
					success: function (
					) {
						const pages = getCurrentPages();
						const prevPage = pages[pages.length - 2]; // 上一页面对象
						// 在上一页面中接收参数
						prevPage.setData({
						receivedParams: params // 这里的 receivedParams 是上一页面的数据变量名
						});
					}
					});

				}else{

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		padding: 40rpx 30rpx;
		.quanlist{
			.quanitem{
				position: relative;
				width: 100%;
				height: 158rpx;
				margin-bottom: 30rpx;
				.quanbg{
					position: absolute;
					width: 100%;
					height: 100%;

				}
				.quan{
					position: relative;
					height: 100%;
					width: 100%;
					display: flex;
					flex-direction: row;
					padding: 16rpx;
					.quanone{
						width: 27%;
						height: 100%;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						.qian{
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 18rpx;
							color: #A9A9A9;
						}
						.qiannum{
							font-size: 42rpx;
						}
					}
					.quantwo{
						width: 43%;
						height: 100%;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: center;
						padding-left: 20rpx;
						.kename{
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 20rpx;
							color: #AAAAAA;
						}
						.ketime{
							display: inline-block;
							margin-top: 10rpx;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 16rpx;
							color: #999999;
						}
					}
					.quanthree{
						width: 30%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						padding-left: 40rpx;
						.qiview{
							width: 92rpx;
							height: 92rpx;
							background: #FFFFFF;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							font-weight: 800;
							font-size: 18rpx;
							color: #AAAAAA;
						}
					}
				}
			}
			.quanactive{
				.quan{
					.quanone{
						.qian{
							color: rgba(232, 68, 58, 1);
						}
					}
					.quantwo{
						.kename{
							color: #333333;
						}
						.ketime{
							color: #999999;
						}
					}
					.quanthree{
						.qiview{
							color: #E8433A;
							background: linear-gradient(90deg, #FEE3C6 0%, #FBC48E 100%);
						}
						

					}
				}
			}
		}
		// padding-bottom: 150rpx;
	}
</style>
